<template>
  <div class="refundStudentMoneyContainer">
    <div
      class="dialog animated"
      :class="open ? 'fadeIn' : 'fadeOut'"
      v-show="show"
      :style="{ visibility: visible ? 'visible' : 'hidden' }"
    >
      <div class="panel animated" :class="open ? 'zoomIn' : ''">
        <div class="title">
          学员详情
          <div class="close" @click="cancel()"></div>
        </div>
        <div class="studentDetails">
          <div class="student_info">
            <div class="student_info_center">
              <div class="student_head"></div>
              <div class="student_name">学员姓名</div>
              <div>年级+班级名称</div>
            </div>
            <div class="student_info_left">
              <div>出生日期：2014-01-01</div>
              <div>入学日期：2019-01-01</div>
              <div>监护人：罗琴</div>
              <div>联系人：18170836326</div>
            </div>
          </div>
          <div class="student_data">
            <el-tabs v-model="activeName">
              <el-tab-pane label="月考勤" name="first">
                <div class="table">
                  <div class="thead">
                    <div style="width: 2.5rem;">期间</div>
                    <div style="width: 1.2rem;">应出勤</div>
                    <div style="width: 1.2rem;">实际出勤</div>
                    <div style="width: 1.2rem;">请假</div>
                    <div style="width: 1.2rem;">旷课</div>
                  </div>
                  <div class="tr_div">
                    <div class="tr">
                      <div style="width: 2.5rem;">20190101-20190103</div>
                      <div style="width: 1.2rem;">23</div>
                      <div style="width: 1.2rem;">20</div>
                      <div style="width: 1.2rem;">3</div>
                      <div style="width: 1.2rem;">0</div>
                    </div>
                    <div class="tr">
                      <div style="width: 2.5rem;">20190101-20190103</div>
                      <div style="width: 1.2rem;">23</div>
                      <div style="width: 1.2rem;">20</div>
                      <div style="width: 1.2rem;">3</div>
                      <div style="width: 1.2rem;">0</div>
                    </div>
                    <div class="tr">
                      <div style="width: 2.5rem;">20190101-20190103</div>
                      <div style="width: 1.2rem;">23</div>
                      <div style="width: 1.2rem;">20</div>
                      <div style="width: 1.2rem;">3</div>
                      <div style="width: 1.2rem;">0</div>
                    </div>
                    <div class="tr">
                      <div style="width: 2.5rem;">20190101-20190103</div>
                      <div style="width: 1.2rem;">23</div>
                      <div style="width: 1.2rem;">20</div>
                      <div style="width: 1.2rem;">3</div>
                      <div style="width: 1.2rem;">0</div>
                    </div>
                    <div class="tr">
                      <div style="width: 2.5rem;">20190101-20190103</div>
                      <div style="width: 1.2rem;">23</div>
                      <div style="width: 1.2rem;">20</div>
                      <div style="width: 1.2rem;">3</div>
                      <div style="width: 1.2rem;">0</div>
                    </div>
                    <div class="tr">
                      <div style="width: 2.5rem;">20190101-20190103</div>
                      <div style="width: 1.2rem;">23</div>
                      <div style="width: 1.2rem;">20</div>
                      <div style="width: 1.2rem;">3</div>
                      <div style="width: 1.2rem;">0</div>
                    </div>
                    <div class="tr">
                      <div style="width: 2.5rem;">20190101-20190103</div>
                      <div style="width: 1.2rem;">23</div>
                      <div style="width: 1.2rem;">20</div>
                      <div style="width: 1.2rem;">3</div>
                      <div style="width: 1.2rem;">0</div>
                    </div>
                    <div class="tr">
                      <div style="width: 2.5rem;">20190101-20190103</div>
                      <div style="width: 1.2rem;">23</div>
                      <div style="width: 1.2rem;">20</div>
                      <div style="width: 1.2rem;">3</div>
                      <div style="width: 1.2rem;">0</div>
                    </div>
                    <div class="tr">
                      <div style="width: 2.5rem;">20190101-20190103</div>
                      <div style="width: 1.2rem;">23</div>
                      <div style="width: 1.2rem;">20</div>
                      <div style="width: 1.2rem;">3</div>
                      <div style="width: 1.2rem;">0</div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="收退费一览" name="second">
                <div style="margin-top:0.06rem;margin-bottom:0.06rem;font-size:0.16rem;">缴费记录</div>
                <div class="table">
                  <div class="thead">
                    <div style="width: 1.5rem;">缴费日期</div>
                    <div style="width: 1rem;">缴费科目</div>
                    <div style="width: 0.6rem;">类别</div>
                    <div style="width: 1rem;">费用</div>
                    <div style="width: 2rem;">计费时间</div>
                    <div style="width: 1.5rem;">订单号</div>
                  </div>
                  <div class="tr_div">
                    <div class="tr">
                      <div style="width: 1.5rem;">2019-01-01 10:00</div>
                      <div style="width: 1rem;">学费<br>餐费</div>
                      <div style="width: 0.6rem;">报名</div>
                      <div style="width: 1rem;">￥1000.00<br>￥1000.00</div>
                      <div style="width: 2rem;">2019-01-01~2019-01-30</div>
                      <div style="width: 1.5rem;">1234567894561</div>
                    </div>
                    <div class="tr">
                      <div style="width: 1.5rem;">2019-01-01 10:00</div>
                      <div style="width: 1rem;">学费<br>餐费</div>
                      <div style="width: 0.6rem;">报名</div>
                      <div style="width: 1rem;">￥1000.00<br>￥1000.00</div>
                      <div style="width: 2rem;">2019-01-01~2019-01-30</div>
                      <div style="width: 1.5rem;">1234567894561</div>
                    </div>
                  </div>
                </div>
                 <div style="margin-top:0.06rem;margin-bottom:0.06rem;font-size:0.16rem;">退费记录</div>
                <div class="table">
                  <div class="thead">
                    <div style="width: 1.5rem;">退费日期</div>
                    <div style="width: 1rem;">退费科目</div>
                    <div style="width: 1rem;">退费</div>
                    <div style="width: 1.5rem;">退费原因</div>
                    <div style="width: 1.5rem;">退单号</div>
                    <div style="width: 1rem;">状态</div>
                  </div>
                  <div class="tr_div">
                    <div class="tr">
                      <div style="width: 1.5rem;">2019-01-01 10:00</div>
                      <div style="width: 1rem;">学费</div>
                      <div style="width: 1rem;">￥1000.00</div>
                      <div style="width: 1.5rem;">缺勤退费</div>
                      <div style="width: 1.5rem;">1234567894561</div>
                      <div style="width: 1rem;">退费成功</div>
                    </div>
                    
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
var vm, user;
export default {
  data: function() {
    return {
      show: false,
      open: false,
      visible: false,
      isAdd: true,
      activeName: "first"
    };
  },
  methods: {
    init: function(data) {
      vm.show = true;
      setTimeout(function() {
        vm.open = true;
        vm.visible = true;
      }, 11);
    },

    cancel: function() {
      //隐藏弹窗
      vm.open = false;
      vm.isAdd = true;
      vm.$emit("cancel", "");
      setTimeout(function() {
        vm.show = false;
        vm.visible = false;
      }, 500);
    }
  },
  created: function() {
    vm = this;
    user = tool.getItem(lsKey.user, true); //得到当前用户信息
  }
};
</script>
<style lang="scss">
.refundStudentMoneyContainer {
  .studentDetails {
    overflow: hidden;
    padding: 0.1rem;
    .student_info {
      float: left;
      width: 3rem;
      margin-left: 0.1rem;
      height: 4rem;
      border: 1px solid #999999;
      font-size: 0.14rem;
      .student_info_center {
        width: 100%;
        text-align: center;
        padding: 0.14rem;
        .student_head {
          border-radius: 50%;
          margin: 0 auto;
          background-color: #999999;
          width: 1rem;
          height: 1rem;
        }
        .student_name {
          font-size: 0.2rem;
          margin: 0.1rem 0;
        }
      }
      .student_info_left {
        margin-top: 0.3rem;
        padding: 0.14rem;
      }
      .student_info_left > div {
        margin-bottom: 0.1rem;
      }
    }
    .student_data {
      float: left;
      width: 8rem;
      min-height: 4rem;
      margin-left: 0.1rem;
      padding: 0.1rem 0.14rem;
      border: 1px solid #999999;
      .el-tabs__item {
        font-size: 0.16rem;
      }
      .el-tabs__nav-wrap::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 0rem;
        background-color: #e4e7ed;
        z-index: 1;
      }
      .table {
        border-radius: 0.05rem;
        font-size: 0.16rem;
        letter-spacing: 0;
      }
      .thead {
        height: 0.5rem;
        line-height: 0.49rem;
        font-weight: bold;
        color: #939399;
        background: #e4e5e7;
      }
      .thead > div,
      .tr > div {
        float: left;
        height: 0.49rem;
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
      }
      .tbody {
        min-height: 0.5rem;
        max-height: 2.99rem;
        overflow-y: auto;
        overflow-x: hidden;
      }
      .tbody::-webkit-scrollbar {
        width: 0.03rem;
        height: 0;
      }
      .tbody::-webkit-scrollbar-thumb {
        border-radius: 0.03rem;
        background: #3885f8;
      }
      .tr {
        height: 0.5rem;
        line-height: 0.49rem;
        color: #333333;
      }
      .tr_add {
        text-decoration: underline;
        color: #409eff;
        cursor: pointer;
      }
      .table .tr_div:last-child .tr {
        /*border-bottom: 0.01rem solid white;*/
        border-bottom: none;
      }
    }
  }
}
</style>
<style scoped src="@/style/module/dialog.css"></style>
<style scoped>
</style>





